// 定义食物类
class Food {
  // 定义一个属性表示食物所对应的元素
  element: HTMLElement;

  constructor() {
    this.element = document.getElementById("food")!;
  }

  // 定义一个获取食物X轴坐标的方法
  get X(): number {
    return this.element.offsetLeft; // 元素左上角相对于其最近已定位父元素的左边缘的距离
  }
  // 定义一个获取食物Y轴坐标的方法
  get Y(): number {
    return this.element.offsetTop; // 元素左上角相对于其最近已定位父元素的顶部边缘的距离
  }

  // 需要修改食物位置的方法
  change() {
    // 食物位置随机
    // 食物的位置最小是0 最大是290
    // 蛇移动一次就是一格  一格的大小是10，要求食物的坐标必须是10的倍数
    const top = Math.round(Math.random() * 29) * 10;
    const left = Math.round(Math.random() * 29) * 10;

    this.element.style.left = top + "px";
    this.element.style.top = left + "px";
  }
}

export default Food;
